<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-11-22 17:08:36
 * @Description: 土含蒸散发遥感动态监测系统
-->
<template>
  <el-row>
    <el-col :span="24" class="paltform-container" :style="`height:${view.height}px`">
      <!-- 标题头部 -->
      <div class="header">
        <div class="tit-warp">
          <span class="tit-name">灌区灌溉遥感动态监测系统</span>
        </div>
      </div>

      <!-- 导航按钮 -->
      <div class="tab-container">
        <div class="tab-box left-box">
          <!-- <div class="custom-button-warp">
            <div class="custom-button active" @click="dataManageHandler">数据管理</div>
          </div> -->
          <div class="custom-button-warp">
            <div class="custom-button active" @click="MPDIhandler">
              土含与蒸散发反演
            </div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(3)">
              灌溉面积监测
            </div>
          </div>
        </div>
        <div class="tab-box middle-box"></div>
        <div class="tab-box right-box">
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(6)">灌溉水量监测</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(4)">多要素联合模拟</div>
          </div>
          <div class="custom-button-warp">
            <div class="custom-button" @click="buttonHandler(5)">耗水过程解析</div>
          </div>
        </div>
      </div>

      <!-- 土含蒸散发成果列表面板 -->
      <div class="soil-et-panel" v-show="showDataPanel">
        <el-card class="data-card">
          <template #header>
            <div class="data-panel-header">
              <span>土含蒸散发成果</span>
              <el-button link @click="showDataPanel = false" :icon="Close" size="small"></el-button>
            </div>
          </template>

          <!-- 筛选条件 -->
          <div class="filter-section">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-select v-model="queryParams.irrigationArea" placeholder="选择灌区" size="small" clearable
                  @change="loadData">
                  <el-option label="石津灌区" value="石津灌区"></el-option>
                  <el-option label="河套灌区" value="河套灌区"></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-date-picker v-model="dateRange" type="daterange" size="small" style="width: 100%"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" @change="handleDateChange" />
              </el-col>
            </el-row>
          </div>

          <!-- Tab切换 -->
          <el-tabs v-model="activeResultType" @tab-click="handleTabClick">
            <el-tab-pane label="土含成果" name="土含成果">
              <div class="results-container">
                <!-- 数据列表 -->
                <el-table :data="dataList" v-loading="loading" size="small" height="380" @row-click="handleRowClick"
                  style="width: 100%" highlight-current-row>
                  <el-table-column prop="fileName" label="文件名称" min-width="140">
                    <template #default="{ row }">
                      <el-tooltip :content="row.fileName" placement="top">
                        <span class="text-overflow">{{ row.fileName }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="monitorDate" label="监测日期" width="100" :formatter="dateFormatter" />
                  <el-table-column prop="irrigationArea" label="灌区" width="90">
                    <template #default="{ row }">
                      <el-tag size="small" type="primary">{{
                        row.irrigationArea
                      }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" width="100" :formatter="dateFormatter" />
                  <el-table-column label="操作" width="80" fixed="right">
                    <template #default="{ row }">
                      <el-button link type="primary" size="small" @click.stop="viewOnMap(row)">
                        查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                  <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next" small
                    @size-change="loadData" @current-change="loadData" />
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="蒸散发成果" name="蒸散发成果">
              <div class="results-container">
                <!-- 数据列表 -->
                <el-table :data="dataList" v-loading="loading" size="small" height="380" @row-click="handleRowClick"
                  style="width: 100%" highlight-current-row>
                  <el-table-column prop="fileName" label="文件名称" min-width="140">
                    <template #default="{ row }">
                      <el-tooltip :content="row.fileName" placement="top">
                        <span class="text-overflow">{{ row.fileName }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="monitorDate" label="监测日期" width="100" :formatter="dateFormatter" />
                  <el-table-column prop="irrigationArea" label="灌区" width="90">
                    <template #default="{ row }">
                      <el-tag size="small" type="success">{{
                        row.irrigationArea
                      }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" width="100" :formatter="dateFormatter" />
                  <el-table-column label="操作" width="80" fixed="right">
                    <template #default="{ row }">
                      <el-button link type="primary" size="small" @click.stop="viewOnMap(row)">
                        查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-container">
                  <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next" small
                    @size-change="loadData" @current-change="loadData" />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>

      <!-- 数据面板切换按钮 -->
      <div class="data-panel-toggle" @click="showDataPanel = !showDataPanel">
        <el-icon>
          <List />
        </el-icon>
        <span>土含蒸散发</span>
      </div>

      <!-- 地图容器 -->
      <div id="map-container" :style="`height:${view.height}px`"></div>

      <!-- 鼠标位置显示 -->
      <div id="mouse-position" class="position_coordinate"></div>
      <!-- 图例面板 -->
      <div class="legend-panel" v-show="showLegend && currentLayerLoaded">
        <div class="legend-header">
          <!-- <span class="legend-title">土壤含水量</span> -->
          <el-button link @click="showLegend = false" :icon="Close" size="small" class="legend-close-btn"></el-button>
        </div>
        <div class="legend-content">
          <div class="color-bar">
            <div v-for="(item, index) in legendData" :key="index" class="color-segment"
              :style="{ backgroundColor: item.color }"></div>
          </div>
          <div class="value-labels">
            <div class="label-row">
              <span class="min-label">{{ legendData[0]?.value }}</span>
              <span class="max-label">{{ legendData[legendData.length - 1]?.value }}</span>
            </div>
            <div class="middle-labels">
              <span v-for="(item, index) in legendData.slice(1, -1)" :key="index" class="middle-label"
                :style="{ left: `${((index + 1) / (legendData.length - 1)) * 100}%` }">
                {{ item.value }}
              </span>
            </div>
          </div>
          <div v-show="type" class="unit-label">单位: mm/天</div>
        </div>
      </div>

      <!-- 图例切换按钮 -->
      <div class="legend-toggle" v-show="currentLayerLoaded" @click="showLegend = !showLegend">
        <el-icon>
          <DataBoard />
        </el-icon>
        <span>图例</span>
      </div>


      <!-- 底图选择面板 -->

      <div style="position: relative">
        <el-card v-show="editBoard" style="max-width: 480px" class="edit-container">
          <div class="tool-body">
            <el-card class="base-layer-card" size="small">
              <template #header>
                <div class="base-layer-header">
                  <span>底图选择</span>
                  <el-button link class="button" @click="editBoard = false" :icon="Close"></el-button>
                </div>
              </template>
              <div class="base-layer-container">
                <el-card :class="`${currentBaseLayer == layer.type ? 'active' : ''}`" v-for="layer in baseLayers"
                  :key="layer.type" :body-style="{ padding: '0px' }" class="img-card"
                  @click="baseImageClickHandler(layer)">
                  <el-image style="width: 74px; height: 54px" :src="layer.img" :fit="'fill'" />
                  <div style="padding: 5px">
                    <span>{{ layer.name }}</span>
                  </div>
                </el-card>
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { Close, List } from "@element-plus/icons-vue";
import { Map, View } from "ol";
import { Tile as TileLayer, Image } from "ol/layer";
import { WMTS, ImageWMS, TileWMS } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get, fromLonLat } from "ol/proj";
import MousePosition from "ol/control/MousePosition";
import { format as formatAxirs } from "ol/coordinate";
import "ol/ol.css";
import { ScaleLine, defaults as defaultControls } from "ol/control";
import { getWidth, getTopLeft } from "ol/extent";
import baseImg1 from "@/assets/img/vec.jpg";
import baseImg2 from "@/assets/img/img.jpg";
import baseImg3 from "@/assets/img/ter.jpg";
import config from "@/config/config";
import router from "@/router";
import { ElMessage } from "element-plus";
import axios from "axios";
import { DataBoard } from "@element-plus/icons-vue";
// 地图相关变量
let map;
const resolutions = [];
const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;

// 初始化分辨率
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

// 响应式数据
const editBoard = ref(true);
const currentBaseLayer = ref("imgLayer");
const currentTypeLayer = ref("GF1_WFV0829_origin_1");
const currentProduct = ref({
  id: 67,
  productName: "S2L2A_20240530",
  satelliteType: "S2L2A",
  produceDate: "2024-05-29T16:00:00.000Z",
  box: '["107.40580930435281","40.50844975902888","108.75382121970257","41.529295247902304"]',
});

// 数据面板相关
const showDataPanel = ref(false);
const activeResultType = ref("土含成果"); // 当前激活的成果类型tab
const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const dateRange = ref([]);
// 图例相关
const showLegend = ref(false);
const currentLayerLoaded = ref(false);

// 图例数据 - 基于SLD文件的颜色映射
let legendData = [
  { value: 0.1, color: '#d7191c' },
  { value: 0.2, color: '#e85b3b' },
  { value: 0.3, color: '#f99d59' },
  { value: 0.4, color: '#fec981' },
  { value: 0.5, color: '#ffedab' },
  { value: 0.6, color: '#ebf7ad' },
  { value: 0.7, color: '#c4e687' },
  { value: 0.8, color: '#96d265' },
  { value: 0.9, color: '#58b453' },
  { value: 1.0, color: '#1a9641' }
];

// 查询参数
const queryParams = reactive({
  page: 1,
  pageSize: 20,
  irrigationArea: "",
  resultType: "土含成果", // 默认为土含成果
  startDate: "",
  endDate: "",
});

// 底图配置
const baseLayers = [
  {
    type: "vecLayer",
    name: "矢量底图",
    img: baseImg1,
  },
  {
    type: "imgLayer",
    name: "影像底图",
    img: baseImg2,
  },
  {
    type: "terLayer",
    name: "地形晕渲",
    img: baseImg3,
  },
];

// 视图高度
const view = reactive({
  height: window.innerHeight,
});

// API基础URL
const API_BASE_URL = "/algorithmApi/api/detection-results";

// 加载土含蒸散发数据
const loadData = async () => {
  loading.value = true;
  try {
    const params = {
      ...queryParams,
      resultType: activeResultType.value, // 使用当前激活的tab类型
    };

    const response = await axios.get(`${API_BASE_URL}/soil-et`, { params });

    if (response.data.code === 200) {
      dataList.value = response.data.data.list || [];
      total.value = response.data.data.total || 0;
    } else {
      ElMessage.error(response.data.message || "数据加载失败");
    }
  } catch (error) {
    console.error("加载数据失败:", error);
    ElMessage.error("网络错误，请稍后重试");

    // 添加模拟数据以便测试
    if (activeResultType.value === "土含成果") {
      dataList.value = [
        {
          id: 1,
          fileName: "S2L2A_20240530_土含成果.tif",
          monitorDate: "2024-05-30",
          irrigationArea: "石津灌区",
          resultType: "土含成果",
          box: "[107.40580930435281,40.50844975902888,108.75382121970257,41.529295247902304]",
          createTime: "2024-05-30",
        },
        {
          id: 2,
          fileName: "S2L2A_20240528_土含成果.tif",
          monitorDate: "2024-05-28",
          irrigationArea: "位山灌区",
          resultType: "土含成果",
          box: "[107.40580930435281,40.50844975902888,108.75382121970257,41.529295247902304]",
          createTime: "2024-05-28",
        },
      ];
      total.value = 2;
    } else {
      dataList.value = [
        {
          id: 3,
          fileName: "S2L2A_20240530_蒸散发成果.tif",
          monitorDate: "2024-05-30",
          irrigationArea: "石津灌区",
          resultType: "蒸散发成果",
          box: "[107.40580930435281,40.50844975902888,108.75382121970257,41.529295247902304]",
          createTime: "2024-05-30",
        },
        {
          id: 4,
          fileName: "S2L2A_20240529_蒸散发成果.tif",
          monitorDate: "2024-05-29",
          irrigationArea: "人民胜利渠灌区",
          resultType: "蒸散发成果",
          box: "[107.40580930435281,40.50844975902888,108.75382121970257,41.529295247902304]",
          createTime: "2024-05-29",
        },
      ];
      total.value = 2;
    }
  } finally {
    loading.value = false;
  }
};

// Tab切换处理
const handleTabClick = (tab) => {
  activeResultType.value = tab.props.name;
  queryParams.page = 1; // 重置到第一页
  queryParams.resultType = tab.props.name;
  loadData();
};

// 处理日期范围变化
const handleDateChange = (dates) => {
  if (dates && dates.length === 2) {
    queryParams.startDate = dates[0];
    queryParams.endDate = dates[1];
  } else {
    queryParams.startDate = "";
    queryParams.endDate = "";
  }
  queryParams.page = 1;
  loadData();
};

// 日期格式化
const dateFormatter = (row, column, cellValue) => {
  if (!cellValue) return "-";
  return new Date(cellValue).toLocaleDateString("zh-CN");
};

// 表格行点击
const handleRowClick = (row) => {
  // 自动在地图上定位
  viewOnMap(row);
};

const type = ref(false)
// 在地图上查看
const viewOnMap = (row) => {
  if (row.resultType == "蒸散发成果") {
    legendData = [
    { value: 0, color: '#1a9641' },
    { value: 1, color: '#96d265' },
    { value: 2, color: '#ebf7ad' },
    { value: 3, color: '#fec981' },
    { value: 4, color: '#e85b3b' },
    { value: 5, color: '#d7191c' }
    ];
    type.value = true
  } else {
    legendData = [
      { value: 0.1, color: '#d7191c' },
      { value: 0.2, color: '#e85b3b' },
      { value: 0.3, color: '#f99d59' },
      { value: 0.4, color: '#fec981' },
      { value: 0.5, color: '#ffedab' },
      { value: 0.6, color: '#ebf7ad' },
      { value: 0.7, color: '#c4e687' },
      { value: 0.8, color: '#96d265' },
      { value: 0.9, color: '#58b453' },
      { value: 1.0, color: '#1a9641' }
    ];
    type.value = false
  }
  try {
    if (row.box) {
      const box = JSON.parse(row.box);
      if (map && Array.isArray(box) && box.length === 4) {
        map.getView().fit(box.map(Number), {
          constrainResolution: false,
          padding: [20, 20, 20, 20],
        });
        ElMessage.success(`正在查看: ${row.fileName}`);

        var newLayer = new TileLayer({
          // 新的 WMS 图层
          source: new TileWMS({
            url: config.geoserver_base_url + "/geoserver/result/wms", // GeoServer的WMS服务URL
            params: {
              LAYERS: "result:" + row.fileName,
              VERSION: "1.1.0",
              FORMAT: "image/png", // 图像格式为 PNG
            },
            serverType: "geoserver",
          }),
        });
        newLayer.set("name", "baseLayer");
        map.getLayers().setAt(3, newLayer); // 替换第二个图层（索引为 1）

        // 显示图层后启用图例
        currentLayerLoaded.value = true;
        showLegend.value = true;
      }
    } else {
      ElMessage.warning("该数据没有坐标信息");
    }
  } catch (error) {
    console.error("解析坐标失败:", error);
    ElMessage.error("坐标数据格式错误");
  }
};

// 初始化地图
const initMap = function () {
  const TIANDI_KEY = "eec7fae87888db2dc4c30c0c458fb66b";
  const matrixSet = "c";

  // WMS图层
  const wmsLayers = new Image({
    source: new ImageWMS({
      url: config.geoserver_base_url + "/geoserver/result/wms",
      params: {
        LAYERS: "result:" + currentTypeLayer.value,
        VERSION: "1.1.0",
        FORMAT: "image/png",
      },
      serverType: "geoserver",
    }),
  });
  wmsLayers.set("name", "baseLayer");
  wmsLayers.setOpacity(1);

  // 地形图层
  const terLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/ter_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "ter",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  terLayer.set("name", "terLayer");

  // 影像图层
  const imgLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/img_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "img",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  imgLayer.set("name", "imgLayer");

  // 矢量图层
  const vecLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/vec_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "vec",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  vecLayer.set("name", "vecLayer");

  // 注记图层
  const cvaLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/cva_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "cva",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
        ],
      }),
    }),
  });
  cvaLayer.set("name", "cvaLayer");

  // 创建地图
  map = new Map({
    target: "map-container",
    layers: [terLayer, vecLayer, imgLayer, wmsLayers, cvaLayer],
    view: new View({
      projection: projection,
    }),
    controls: defaultControls({
      attribution: true,
      zoom: false,
      rotate: true,
    }).extend([]),
  });

  // 设置地图视图
  map.getView().fit(JSON.parse(currentProduct.value.box), {
    constrainResolution: false,
  });

  // 鼠标位置控件
  const mousePositionControl = new MousePosition({
    coordinateFormat: function (coordinate) {
      return formatAxirs(coordinate, "经度:{x} 纬度:{y}", 2);
    },
    projection: "EPSG:4326",
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
  });
  map.addControl(mousePositionControl);

  // 比例尺控件
  const scaleLine = new ScaleLine({
    units: "metric",
  });
  map.addControl(scaleLine);
};

// 底图切换
const baseImageClickHandler = function (layer) {
  switchBaseLayer(layer.type);
  currentBaseLayer.value = layer.type;
};

const switchBaseLayer = (layerType) => {
  if (!map) return;
  map.getLayers().forEach((layer) => {
    if (
      layer.values_.name == layerType ||
      layer.values_.name == "baseLayer" ||
      layer.values_.name == "cvaLayer"
    ) {
      layer.setVisible(true);
    } else {
      layer.setVisible(false);
    }
  });
};

// 导航按钮处理
const dataManageHandler = function () {
  router.push("/bigScreen2/11");
};

const MPDIhandler = function () {
  router.push("/bigScreen/11");
};

const buttonHandler = function (num) {
  router.push(`/bigScreen${num}/11`);
};

// 组件挂载
onMounted(() => {
  setTimeout(() => {
    initMap();
    // 初始加载数据
    loadData();
  }, 2000);
});
</script>

<style lang="scss" scoped>
.paltform-container {
  position: relative;
}

.header {
  background: url("@/assets/bigScreen/img/title_back.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 114px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-position: 0px -13px;
  z-index: 200;

  .tit-warp {
    position: relative;
    top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;

    .tit-name {
      font-size: 28px;
      color: #d1e5ff;
      line-height: 30px;
      text-shadow: 1px 2px 0px rgba(95, 129, 151, 0.47),
        2px 4px 2px rgba(58, 99, 137, 0.15), 4px 10px 18px rgba(27, 41, 60, 0.5);
      background: linear-gradient(0deg, #ffffff 0%);
      -webkit-text-stroke: 1px #eff5ff;
      -webkit-text-fill-color: transparent;
    }
  }
}

.tab-container {
  width: 100%;
  position: absolute;
  display: flex;
  top: 20px;
  z-index: 210;

  .tab-box {
    .custom-button {
      flex: 1;
      text-align: center;
      display: inline-block;
      width: 203px;
      height: 88px;
      line-height: 70px;
      font-weight: bold;
      font-size: 16px;
      text-shadow: 8px 11px 1px rgba(145, 199, 255, 0.05),
        18px 38px 32px rgba(0, 0, 0, 0.24);
      font-style: italic;
      background: url("@/assets/bigScreen/img/tab_button.png") no-repeat;
      color: #c1f5ff;
      background-position: 0px -10px;
      cursor: pointer;

      &:hover {
        background: url("@/assets/bigScreen/img/tab_button_active.png") no-repeat;
        background-position: 0px -10px;
      }
    }

    .active {
      background: url("@/assets/bigScreen/img/tab_button_active.png") no-repeat;
      background-position: 0px -10px;
    }
  }

  .left-box {
    flex: 0.35;
    display: flex;
  }

  .middle-box {
    flex: 0.3;
  }

  .right-box {
    flex: 0.35;
    display: flex;
  }
}

// 土含蒸散发面板样式
.soil-et-panel {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 550px;
  z-index: 220;

  .data-card {
    background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
    border: 1px solid rgba(86, 163, 240, 0.3);
    box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);

    .data-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #d1e5ff;
      font-size: 16px;
      font-weight: bold;
    }

    .filter-section {
      margin-bottom: 15px;
    }

    .results-container {
      .text-overflow {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .pagination-container {
        margin-top: 15px;
        text-align: center;
      }
    }
  }
}

.data-panel-toggle {
  position: absolute;
  top: 120px;
  left: 20px;
  z-index: 215;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
  color: #d1e5ff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(86, 163, 240, 0.3);
  transition: all 0.3s ease;

  &:hover {
    background: linear-gradient(0deg, #1a3a52, rgba(26, 58, 82, 0.9));
    border-color: rgba(86, 163, 240, 0.6);
  }
}

// 图例面板样式
.legend-panel {
  position: absolute;
  bottom: 80px;
  right: 20px;
  width: 200px;
  z-index: 220;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.95));
  border: 1px solid rgba(86, 163, 240, 0.3);
  border-radius: 5px;
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  backdrop-filter: blur(5px);

  .legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(86, 163, 240, 0.2);

    .legend-title {
      color: #d1e5ff;
      font-size: 14px;
      font-weight: bold;
    }

    .legend-close-btn {
      color: #d1e5ff;
      padding: 0;

      &:hover {
        color: #56a3f0;
      }
    }
  }

  .legend-content {
    padding: 15px;

    .color-bar {
      display: flex;
      height: 20px;
      margin-bottom: 10px;
      border: 1px solid rgba(86, 163, 240, 0.3);
      border-radius: 2px;
      overflow: hidden;

      .color-segment {
        flex: 1;
        height: 100%;
      }
    }

    .value-labels {
      position: relative;
      height: 35px;
      margin-bottom: 5px;

      .label-row {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: #d1e5ff;
        line-height: 1.2;
      }

      .middle-labels {
        position: relative;
        height: 20px;

        .middle-label {
          position: absolute;
          font-size: 10px;
          color: #a8c8e8;
          transform: translateX(-50%);
          top: 0;
          line-height: 1;
        }
      }
    }

    .unit-label {
      font-size: 11px;
      color: #a8c8e8;
      text-align: center;
      margin-top: 5px;
      padding-top: 8px;
      border-top: 1px solid rgba(86, 163, 240, 0.2);
    }
  }
}

// 图例切换按钮
.legend-toggle {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 215;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.9));
  color: #d1e5ff;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(86, 163, 240, 0.3);
  transition: all 0.3s ease;
  font-size: 12px;

  &:hover {
    background: linear-gradient(0deg, #1a3a52, rgba(26, 58, 82, 0.9));
    border-color: rgba(86, 163, 240, 0.6);
  }
}

#map-container {
  width: 100%;
  height: 600px;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 10;
}

.position_coordinate {
  color: #fff;
  position: absolute;
  font-size: 14px;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  padding: 5px 10px;
  z-index: 110;
}

.base-layer-card {
  background: none;

  .base-layer-header {
    display: flex;
    justify-content: space-between;
  }

  .base-layer-container {
    display: flex;
    justify-content: space-between;

    .active {
      border: 2px solid #56a3f0;
    }
  }

  .img-card {
    border: 2px solid hsla(210, 96%, 54%, 0);
    cursor: pointer;

    &:hover {
      border: 2px solid #4685c4;
    }
  }
}
</style>

<style lang="scss">
.edit-container {
  z-index: 100;
  position: absolute;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  border-radius: 3px;
  right: 34px;
  top: 50px;
  width: 300px;

  .tool-body {
    &>.el-card {
      border: none !important;

      .el-card.is-always-shadow {
        box-shadow: none !important;
      }
    }

    .base-layer-card.is-always-shadow {
      box-shadow: none !important;
    }
  }
}

.base-layer-card {
  .el-card__header {
    padding: 5px !important;
  }

  .el-card__body {
    padding: 15px;
  }

  .el-card__footer {
    padding: 5px !important;
  }
}

// 土含蒸散发面板深度样式
.soil-et-panel {
  .el-card {
    border: 1px solid rgba(86, 163, 240, 0.3) !important;

    .el-card__header {
      background: rgba(11, 40, 59, 0.8);
      border-bottom: 1px solid rgba(86, 163, 240, 0.2);
      padding: 10px 15px !important;
    }

    .el-card__body {
      background: rgba(21, 30, 40, 0.95);
      padding: 15px !important;
    }
  }

  // Tab样式
  .el-tabs__header {
    margin: 0 0 15px 0;
  }

  .el-tabs__nav-wrap::after {
    background-color: rgba(86, 163, 240, 0.3);
  }

  .el-tabs__item {
    color: #d1e5ff;
    font-weight: bold;

    &.is-active {
      color: #409eff;
    }

    &:hover {
      color: #66b1ff;
    }
  }

  .el-tabs__active-bar {
    background-color: #409eff;
  }

  // 表格样式
  .el-table {
    background: transparent !important;

    .el-table__header-wrapper {
      .el-table__header {
        background: rgba(11, 40, 59, 0.8) !important;

        th {
          background: transparent !important;
          color: #d1e5ff !important;
          border-bottom: 1px solid rgba(86, 163, 240, 0.2) !important;
        }
      }
    }

    .el-table__body-wrapper {
      .el-table__body {
        background: transparent !important;

        tr {
          background: transparent !important;

          &:hover {
            background: rgba(86, 163, 240, 0.1) !important;
          }

          &.current-row {
            background: rgba(86, 163, 240, 0.2) !important;
          }

          td {
            background: transparent !important;
            color: #d1e5ff !important;
            border-bottom: 1px solid rgba(86, 163, 240, 0.1) !important;
          }
        }
      }
    }
  }

  // 分页样式
  .el-pagination {
    background: transparent !important;

    .btn-prev,
    .btn-next,
    .el-pager li {
      background: rgba(11, 40, 59, 0.8) !important;
      color: #d1e5ff !important;
      border: 1px solid rgba(86, 163, 240, 0.3) !important;

      &:hover {
        background: rgba(86, 163, 240, 0.3) !important;
      }

      &.is-active {
        background: #56a3f0 !important;
        color: #fff !important;
      }
    }

    .el-select {
      .el-input__wrapper {
        background: rgba(11, 40, 59, 0.8) !important;
        border: 1px solid rgba(86, 163, 240, 0.3) !important;
        color: #d1e5ff !important;
      }
    }
  }

  // 筛选条件样式
  .filter-section {

    .el-select,
    .el-date-editor {
      .el-input__wrapper {
        background: rgba(11, 40, 59, 0.8) !important;
        border: 1px solid rgba(86, 163, 240, 0.3) !important;
        color: #d1e5ff !important;

        .el-input__inner {
          color: #d1e5ff !important;
        }
      }
    }
  }
}
</style>
